<template>
  <div class="app-container home">
    <el-button type="primary" plain @click="drawPoint">中心点</el-button>
    <el-button type="primary" plain @click="drawLine">中心点连线</el-button>
    <el-button type="primary" plain @click="drawPolygon">缓冲区域</el-button>
    <el-button type="primary" plain @click="drawAll">点、中心线、缓冲区</el-button>
    <div>
      <center>
        <canvas id="mycanvas" width="1500" height="1500"></canvas>
      </center>
    </div>
  </div>
</template>

<script>
export default {
  name: "GisAnalyse",
  data() {
    return {
      // 版本号
      version: "3.8.5",
      finalRes: [],
      rects:[],
      square: 0,
      dis: 0,
      polingons:[],
    };
  },
  created() {
    let angles = 30;
    let dis = 100;
    let square = 7;
    let point = {x:0,y:0};
    this.getAllCenterPoint(angles,dis,square,point);
    this.getAllRects(angles,dis,square,point);
  },
  methods: {
    drawAll(){
      var canvas = document.getElementById("mycanvas");
      var ctx = canvas.getContext("2d");
      const W = ctx.canvas.width;
      const H = ctx.canvas.height;
      ctx.setTransform(1,0,0,1,0,0); // resets the transform to clear
      ctx.clearRect(0,0,W,H); // clears the canvas
      ctx.setTransform(1, 0, 0, 1, W / 2, H / 2); // moves the origin to the center of
      // ctx.strokeRect(-1000,-1000, 1000, 1000);

      // 中心原点
      ctx.beginPath();
      ctx.arc(0,0, 5, 0, 2 * Math.PI, false);
      ctx.fillText("中心点",1,1);
      ctx.font = '30px Consolas'
      ctx.fillStyle = "black";
      ctx.fill(); 
      // 中心点
      for(let i=0;i<this.finalRes.length;i++){
        for(let x=0;x<this.finalRes[i].points.length;x++){
          //绘制点
          ctx.beginPath();
          ctx.arc(this.finalRes[i].points[x].point.x,this.finalRes[i].points[x].point.y, 5, 0, 2 * Math.PI, false);
          ctx.fillStyle = "red";
          ctx.fill(); 
          ctx.closePath();
        }
      }
      for(let i=0;i<this.rects.length;i++){
        for(let x=0;x<this.rects[i].rects.length;x++){
          ctx.beginPath();
          ctx.moveTo(this.rects[i].rects[x].lt.x,this.rects[i].rects[x].lt.y);
          ctx.lineTo(this.rects[i].rects[x].rt.x,this.rects[i].rects[x].rt.y);
          ctx.lineTo(this.rects[i].rects[x].rb.x,this.rects[i].rects[x].rb.y);
          ctx.lineTo(this.rects[i].rects[x].lb.x,this.rects[i].rects[x].lb.y);
          ctx.closePath();
          ctx.lineWidth = 2;//设置线条宽度
          ctx.strokeStyle = "black";//设置线条颜色
          ctx.stroke();//用于绘制线条
        }
      }
      ctx.save();

      for(let i=0;i<this.finalRes.length;i++){
        ctx.beginPath();
        ctx.moveTo(0, 0);
        for(let x=0;x<this.finalRes[i].points.length;x++){
          ctx.lineTo(this.finalRes[i].points[x].point.x,this.finalRes[i].points[x].point.y);
        }
        ctx.closePath();
        ctx.lineWidth = 2;//设置线条宽度
        ctx.strokeStyle = "red";//设置线条颜色
        ctx.setLineDash([10, 20], 5);
        ctx.stroke();//用于绘制线条
      }

      ctx.beginPath();
      ctx.setLineDash([10, 20], 5);
      ctx.lineWidth = 2;
      ctx.strokeStyle = "red";
      ctx.arc(0,0,(this.square-1)*this.dis+this.dis/2,0,2*Math.PI);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();

    },
    drawPolygon(){
      var canvas = document.getElementById("mycanvas");
      var ctx = canvas.getContext("2d");
      const W = ctx.canvas.width;
      const H = ctx.canvas.height;
      ctx.setTransform(1,0,0,1,0,0); // resets the transform to clear
      ctx.clearRect(0,0,W,H); // clears the canvas
      ctx.setTransform(1, 0, 0, 1, W / 2, H / 2); // moves the origin to the center of
      // ctx.strokeRect(-1000,-1000, 1000, 1000);
      // 中心原点
      ctx.beginPath();
      ctx.arc(0,0, 5, 0, 2 * Math.PI, false);
      ctx.fillStyle = "red";
      ctx.fill(); 
      // 中心点
      // for(let i=0;i<this.finalRes.length;i++){
      //   for(let x=0;x<this.finalRes[i].points.length;x++){
      //     //绘制点
      //     ctx.beginPath();
      //     ctx.arc(this.finalRes[i].points[x].point.x,this.finalRes[i].points[x].point.y, 2, 0, 2 * Math.PI, false);
      //     ctx.fillStyle = "black";
      //     ctx.fill(); 
      //     ctx.closePath();
      //   }
      // }
      for(let i=0;i<this.rects.length;i++){
        for(let x=0;x<this.rects[i].rects.length;x++){
          ctx.beginPath();
          ctx.moveTo(this.rects[i].rects[x].lt.x,this.rects[i].rects[x].lt.y);
          ctx.lineTo(this.rects[i].rects[x].rt.x,this.rects[i].rects[x].rt.y);
          ctx.lineTo(this.rects[i].rects[x].rb.x,this.rects[i].rects[x].rb.y);
          ctx.lineTo(this.rects[i].rects[x].lb.x,this.rects[i].rects[x].lb.y);
          ctx.closePath();
          ctx.lineWidth = 2;//设置线条宽度
          ctx.strokeStyle = "black";//设置线条颜色
          ctx.stroke();//用于绘制线条
        }
      }
      ctx.save();

      ctx.beginPath();
      ctx.setLineDash([10, 20], 5);
      ctx.lineWidth = 2;
      ctx.strokeStyle = "red";
      ctx.arc(0,0,(this.square-1)*this.dis+this.dis/2,0,2*Math.PI);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
    },
    drawPoint(){
      var canvas = document.getElementById("mycanvas");
      var ctx = canvas.getContext("2d");
      const W = ctx.canvas.width;
      const H = ctx.canvas.height;
      ctx.setTransform(1,0,0,1,0,0); // resets the transform to clear
      ctx.clearRect(0,0,W,H); // clears the canvas
      ctx.setTransform(1, 0, 0, 1, W / 2, H / 2); // moves the origin to the center of
      // ctx.strokeRect(-1000,-1000, 1000, 1000);
      // 中心原点
      ctx.beginPath();
      ctx.arc(0,0, 5, 0, 2 * Math.PI, false);
      ctx.strokeText("中心点",3,3);
      ctx.font = '30px Consolas'
      ctx.fillStyle = "red";
      ctx.fill(); 
      // 中心点
      for(let i=0;i<this.finalRes.length;i++){
        for(let x=0;x<this.finalRes[i].points.length;x++){
          //绘制点
          ctx.beginPath();
          ctx.arc(this.finalRes[i].points[x].point.x,this.finalRes[i].points[x].point.y, 5, 0, 2 * Math.PI, false);
          ctx.fillStyle = "red";
          ctx.fill(); 
          ctx.closePath();
        }
      }
      ctx.save();
      ctx.beginPath();
      ctx.setLineDash([10, 20], 5);
      ctx.lineWidth = 2;
      ctx.strokeStyle = "red";
      ctx.arc(0,0,(this.square-1)*this.dis+this.dis/2,0,2*Math.PI);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
    },
    drawLine(){
      var canvas = document.getElementById("mycanvas");
      var ctx = canvas.getContext("2d");
      const W = ctx.canvas.width;
      const H = ctx.canvas.height;
      ctx.setTransform(1,0,0,1,0,0); // resets the transform to clear
      ctx.clearRect(0,0,W,H); // clears the canvas
      ctx.setTransform(1, 0, 0, 1, W / 2, H / 2); // moves the origin to the center of
      // ctx.strokeRect(-1000,-1000, 1000, 1000);
      // 中小心点
      for(let i=0;i<this.finalRes.length;i++){
        ctx.beginPath();
        ctx.moveTo(0, 0);
        for(let x=0;x<this.finalRes[i].points.length;x++){
          ctx.lineTo(this.finalRes[i].points[x].point.x,this.finalRes[i].points[x].point.y);
        }
        ctx.closePath();
        ctx.lineWidth = 2;//设置线条宽度
        ctx.strokeStyle = "black";//设置线条颜色
        ctx.stroke();//用于绘制线条
      }

      ctx.beginPath();
      ctx.arc(0,0, 5, 0, 2 * Math.PI, false);
      ctx.fillStyle = "red";
      ctx.fill(); 
      ctx.closePath();

      for(let i=0;i<this.finalRes.length;i++){
        for(let x=0;x<this.finalRes[i].points.length;x++){
          //绘制点
          ctx.beginPath();
          ctx.arc(this.finalRes[i].points[x].point.x,this.finalRes[i].points[x].point.y, 5, 0, 2 * Math.PI, false);
          ctx.fillStyle = "red";
          ctx.fill(); 
          ctx.closePath();
        }
      }
      ctx.save();
      ctx.beginPath();
      ctx.setLineDash([10, 20], 5);
      ctx.lineWidth = 2;
      ctx.strokeStyle = "red";
      ctx.arc(0,0,(this.square-1)*this.dis+this.dis/2,0,2*Math.PI);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
    },
    getAllRects(angles,dis,square,point){ // angles:  15 30(推荐) 45 90
      this.square = square;
      this.dis = dis;
      let circleTotal = 360;
      let count = circleTotal / angles;
      let firstRect = {
        angle: 0, 
      }
      let firstRectArray = new Array();
      for(let i=0;i<square;i++){
        let rectInfo = {};
        if(i==0){
          rectInfo.lt = { x: -dis/2, y: -dis/2 };
          rectInfo.rt = { x: dis/2,y: -dis/2 }
          rectInfo.lb = { x: -dis/2, y: dis/2 };
          rectInfo.rb = { x: dis/2, y: dis/2 };
        }else{
          rectInfo.lt = { x: -dis/2, y: -dis/2-i*dis };
          rectInfo.rt = { x: dis/2,y: -dis/2-i*dis }
          rectInfo.lb = { x: -dis/2, y: dis/2+i*dis };
          rectInfo.rb = { x: dis/2, y: dis/2+i*dis };
        }
        firstRectArray.push(rectInfo);
      }
      firstRect.rects = firstRectArray;
      this.rects.push(firstRect);
      for(let n=1;n<count;n++){
        let angle = angles * n;
        let res = {
          angle:angle
        };
        let	r = ((2*Math.PI) / 360) * angle;
        let w = dis; 
        let h	= dis;
        let rects = new Array();
        for(let m=0;m<firstRectArray.length;m++){
          let rectInfo = {};
          let centerX = 0;
          let centerY = 0;
          let x = firstRectArray[m].lt.x;
          let y = firstRectArray[m].lt.y;
          let newAX = centerX + (x - centerX) * Math.cos(r) - (y - centerY) * Math.sin(r);
          let newAY = centerY + (x - centerY) * Math.sin(r) + (y - centerY) * Math.cos(r);
          let newBX =	centerX + (x + w - centerX) * Math.cos(r) - (y - centerY) * Math.sin(r);
          let newBY = centerY + (x + w - centerX) * Math.sin(r) + (y - centerY) * Math.cos(r);
          let newCX = centerX + (x + w - centerX) * Math.cos(r) - (y + h - centerY) * Math.sin(r);
          let newCY = centerY + (x + w + centerX) * Math.sin(r) + (y + h - centerY) * Math.cos(r);
          let newDX = centerX + (x - centerX) * Math.cos(r) - (y + h - centerY) * Math.sin(r);
          let newDY = centerY + (x - centerX) * Math.sin(r) + (y + h - centerY) * Math.cos(r);
          rectInfo.lt = {x:newAX,y:newAY};
          rectInfo.rt = {x:newBX,y:newBY};
          rectInfo.rb = {x:newCX,y:newCY};
          rectInfo.lb = {x:newDX,y:newDY};
          rects.push(rectInfo)
        }
        res.rects = rects;
        this.rects.push(res);
      }
      console.log("---------缓冲区---------",this.rects)
    },
    getAllCenterPoint(angles,dis,square,point){
      // let angles = angles;    // 旋转角度数，即线间夹角   *
      let circleTotal = 360;  // 平面圆形总度书   
      let lenUnit = dis;          // 外扩距离     *
      let squares = square;       //外扩单位数 7-13
      let count = circleTotal / angles;
      // let point = {x:0,y:0};  // 中心点 *
      for(let x=0;x<count;x++){
        let angle = angles * x;
        let res = {
          angle:angle
        };
        if(angle<=90){
          let center = new Array();
          if(angle==90){
            for(var i=1;i<squares;i++){
              let len = lenUnit * i;
              let newPoint = {
                index: i,
                len:len,
                point:{
                  x:Number(point.x+len),
                  y:point.y
                }
              };
              center.push(newPoint)
            }
          }else{
            for(var i=1;i<squares;i++){
              let len = lenUnit * i;
              let newPoint = this.getCenterPoint(i,point,len,angle);
              center.push(newPoint);
            }
          }
          res.points = center;
        }else if(angle>90&&angle<=180){
          let center = new Array();
          if(angle==180){
            for(var i=1;i<squares;i++){
              let len = lenUnit * i;
              let newPoint = {
                index: i,
                len:len,
                point:{
                  x:point.x,
                  y:-Number(point.y+len)
                }
              };
              center.push(newPoint)
            }
          }else{
            let newAngle = Number(180-angle);
            for(var i=1;i<squares;i++){
              let len = lenUnit * i;
              let newPoint = this.getCenterPoint(i,point,len,newAngle);
              let resPoint = {
                index:i,
                len:len,
                point:{
                  x: newPoint.point.x,
                  y: -newPoint.point.y
                }
              };
              center.push(resPoint);
            }
          }
          res.points = center;
        }else if(angle>180&&angle<=270){
          let center = new Array();
          if(angle==270){
            for(var i=1;i<squares;i++){
              let len = lenUnit * i;
              let newPoint = {
                index: i,
                len:len,
                point:{
                  x:-Number(point.x+len),
                  y:point.y
                }
              };
              center.push(newPoint)
            }
          }else{
            let newAngle = Number(angle-180);
            for(var i=1;i<squares;i++){
              let len = lenUnit * i;
              let newPoint = this.getCenterPoint(i,point,len,newAngle);
              let resPoint = {
                index:i,
                len:len,
                point:{
                  x: -newPoint.point.x,
                  y: -newPoint.point.y
                }
              };
              center.push(resPoint);
            }
          }
          res.points = center;
        }else if(angle>270&&angle<=360){
          let center = new Array();
          if(angle<360){
            let newAngle = Number(360-angle);
            for(var i=1;i<squares;i++){
              let len = lenUnit * i;
              let newPoint = this.getCenterPoint(i,point,len,newAngle);
              let resPoint = {
                index:i,
                len:len,
                point:{
                  x: -newPoint.point.x,
                  y: newPoint.point.y
                }
              };
              center.push(resPoint);
            }
          }
          res.points = center;
        }
        this.finalRes.push(res);
      }
      console.log("---------中心点---------",this.finalRes)
    },
    getCenterPoint(index,point,len,degree){
      let	radian = ((2*Math.PI) / 360) * degree;
      let x =  Number(point.x+len * Math.sin(radian));
      let y =  Number(len * Math.cos(radian));
      let centerPoint = {
        index:index,
        len:len,
        point:{x:x,y:y}
      }
      return centerPoint;
    },
  }
};
</script>

<style scoped lang="scss">

</style>

